import CalendarHeatmap from "react-calendar-heatmap";
import "react-calendar-heatmap/dist/styles.css";
import './style/index.css';
import { useState, useEffect } from 'react';
import { GetHeatMap } from "../../api/Upload";
import LoginStore from '../../store/Login/index';

export default function HeatMap() {

    const { userInfo } = LoginStore();//用户个人身份信息

    useEffect(() => {
        GetHeatMap(userInfo.id).then(({ data }) => {
            let list = [];

            data.data.forEach((item) => {

                if (list.some((i) => i.date === item.data.split('T')[0])){
                    list.forEach((i) => {
                        if (i.date === item.data.split('T')[0]){
                            i.count += item.count;
                        }
                    })
                } else {
                    list.push({ date: item.data.split('T')[0], count: item.count })
                }



            })

            setData(list);
        })
    }, []);

    const [data, setData] = useState([]);
    return (
        <div>
            <h2 style={{ fontSize: '20px', fontWeight: 'bold', textAlign: "left", marginLeft: "20px", marginBottom: "20px" }}>用户贡献度</h2>
            <CalendarHeatmap
                startDate={new Date("2025-01-01")}
                endDate={new Date("2025-12-31")}
                values={data}
                showWeekdayLabels
                tooltipRenderer={(value) => {
                    return value ? `${value.date}: ${value.count} contributions` : 'No data';
                }}
                classForValue={(value) => {
                    if (!value) return 'color-empty';
                    return `color-scale-${Math.min(value.count, 4)}`;
                }}
            />
        </div>
    );
}